<template>
	<gui-page>
		<template v-slot:gBody>
			<view style="background-color: #fff;">
				<!-- 头像与我的模块 -->
				<view class="mine">
					<view class="gui-margin-top-large gui-padding">
						<text class="gui-h4 gui-bold" style="color:#fff">{{$t("tabBar.me")}}</text>
					</view>
					<view class="login-langType" style="width:200rpx;">
						<gui-segmented-control :items="cates" :current="langIndex" borderRadius="40rpx"
							customStyle="border-radius:40rpx;height:40rpx;" @change="switchLanguage">
						</gui-segmented-control>
					</view>
					<view class="gui-list gui-padding">
						<view class="gui-list-items">
							<view class="gui-list-image ucenter-face gui-relative">
								<image class="gui-list-image ucenter-face-image"
									src="http://screen.bjdnlsj.com/afl-app/img/202208291422350498_admin.png"
									mode="widthFix"></image>
							</view>
							<view class="gui-list-body">
								<view class="gui-list-title">
									<text class="gui-list-title-text "
										style="color:#fff">{{data.userInfo.userName}}</text>
								</view>
								<text class="gui-list-body-desc " style="color:#fff">{{data.userInfo.orgName}}</text>
							</view>
							<!-- <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text> -->
						</view>
					</view>
				</view>

				<view class="gui-list gui-margin-top gui-padding-x">
					<view class="gui-list-items" @click="goPage('/pages/setting/user')">
						<!-- <text class="gui-list-icon gui-icons gui-color-blue">&#xe60d;</text> -->
						<image class="item-icon" src="@/static/set/user.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{$t("navigationBar.userinfo")}}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
					<view class="gui-list-items" @click="goPage('/pages/setting/equipment')">
						<!-- <text class="gui-list-icon gui-icons gui-color-green">&#xe612;</text> -->
						<image class="item-icon" src="@/static/set/equipment.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{$t("navigationBar.facilityInformation")}}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
					<view class="gui-list-items" @click="goPage('/pages/setting/changePassword')">
						<!-- <text class="gui-list-icon gui-icons gui-color-orange">&#xe624;</text> -->
						<image class="item-icon" src="@/static/set/password.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{$t("navigationBar.changePassword")}}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
					<view class="gui-list-items" @click="goPage('/pages/setting/warehouse')">
						<!-- <text class="gui-list-icon gui-icons gui-color-red">&#xe687;</text> -->
						<image class="item-icon" src="@/static/set/warehouse.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{$t("navigationBar.warehouseSetting")}}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
				</view>
				<view class="gui-padding-x">
					<view class="gui-list-items" @click="goPage(`/pages/setting/printer`)">
						<!-- <text class="gui-list-icon gui-icons gui-color-yellow">&#xe613;</text> -->
						<image class="item-icon" src="@/static/set/printer.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{$t("navigationBar.printerSetting")}}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
					<view class="gui-list-items" @click="serveSeting">
						<!-- <text class="gui-list-icon gui-icons gui-color-red">&#xe629;</text> -->
						<image class="item-icon" src="@/static/set/settingUp.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{$t("navigationBar.serviceSetting")}}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
					<view class="gui-list-items" @click="goPage('/pages/setting/about')">
						<!-- <text class="gui-list-icon gui-icons gui-color-red">&#xe629;</text> -->
						<image class="item-icon" src="@/static/set/aboutSoftware.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{$t("navigationBar.aboutSoftware")}}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
					<view class="gui-list-items" @click="wgtUrlupload">
						<!-- <text class="gui-list-icon gui-icons gui-color-red">&#xe629;</text> -->
						<image class="item-icon" src="@/static/set/software.png" alt="" />
						<view class="gui-list-body ">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{$t("navigationBar.versionUpdating")}}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
				</view>
				<view class="ucenter-line gui-bg-white gui-dark-bg-level-3"></view>
				<view hover-class="gui-tap" @click="outLogin">
					<text
						class="gui-text-center gui-block-text gui-icons logoff gui-color-gray">&#xe62e;{{$t("my.exit")}}</text>
				</view>
			</view>
			


		</template>
	</gui-page>
</template>
<script setup>
	import {
		reLaunch
	} from '@/utils/routerSkip.js'
	import {
		navigate
	} from '@/utils/routerSkip.js'
	import {
		getLang
	} from '@/locale/index';
	import {
		useStore
	} from "vuex";
	import {
		USERINFO
	} from '@/constant/index.js'
	import {
		appUpdate
	} from '@/api/api.js'
	import {
		reactive,
		ref,
		onMounted,
		computed,
		watch
	} from "vue";
	import {
		useI18n
	} from 'vue-i18n';
	const {
		t
	} = useI18n();
	let store = useStore();
	let langIndex = ref();
	let isAndroid = ref(false);
	let langTypes = ["zh-Hans", "en", "es"]
	let cates = computed(() => {
		return [t('login.simplified'), t('login.english'), t('login.spanish')]
	})

	let data = reactive({
		// icon: require("@/static/set/user.png"),
		userInfo: {},
		percent:0
	})
	onMounted(() => {
		let systemInfo = uni.getSystemInfoSync();
		//判断当前用户机型是否为安卓坏境
		isAndroid.value = systemInfo.platform.toLowerCase() === 'android';
		// let systemInfo = uni.getSystemInfoSync();
		//判断当前用户机型是否为安卓坏境
		isAndroid.value = systemInfo.platform.toLowerCase() === 'android';
		let langType = uni.getLocale()
		langIndex.value = langTypes.findIndex(x => x == langType)
		if (!uni.getStorageSync(USERINFO)) {
			requestData()
		} else {
			data.userInfo = uni.getStorageSync(USERINFO)
			console.log(data.userInfo)
		}
	})
	const requestData = async () => {
		let res = await getCurrentUser({})
		if (res) {
			data.userInfo = res
			uni.setStorageSync(USERINFO, data.userInfo);
		} else {
			uni.showToast({
				title: t('JsInternational.userInformationFailed'),
				icon: "none"
			});
		}
	}
	// 跳转页面
	const goPage = (x) => {
		navigate({
			url: x
		})
	}
	// 语言切换
	function switchLanguage(index) {
		let type = langTypes[index];
		// #ifdef APP-PLUS
		if (isAndroid) {
			uni.showModal({
				content: t('login.language-change-confirm'),
				success: (res) => {
					if (res.confirm) {
						langIndex.value = index
						getLang(type)
					}
				}
			})
		} else {
			langIndex.value = index
			getLang(type)
		}
		// #endif
		// #ifndef APP-PLUS
		langIndex.value = index
		getLang(type)
		// #endif
	}

	// 服务设置
	const serveSeting = () => {
		uni.showModal({
			title: t('smashRemoval.warmPrompt'),
			content: t('smashRemoval.reconfiguration'),
			success: function(res) {
				if (res.confirm) {
					store.commit('updateServeSetingBool', 1)
					uni.setStorageSync(USERINFO, {});
					reLaunch({
						url: '/pages/login/login'
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const outLogin = () => {
		uni.showModal({
			title: t('smashRemoval.warmPrompt'),
			content: t('pageTranslation.exitSystem'),
			success: function(res) {
				if (res.confirm) {
					uni.setStorageSync(USERINFO, {});
					reLaunch({
						url: '/pages/login/login'
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	// 版本更新方法
	const wgtUrlupload = () => {
		//系统版本升级判断接口（后台获取服务器）
		// #ifdef APP-PLUS
		/** 锁定屏幕方向 */
		plus.screen.lockOrientation('portrait-primary');
		/** 检测升级 */
		// 取得版本号
		plus.runtime.getProperty(plus.runtime.appid, function(info) {
			// 版本号变量持久化存储
			getApp().globalData.editionnum = info.version; //版本号持久化存储做其它备用
			console.log("当前应用版本：" + info.version + "---" + plus.runtime.version);
			console.log("appid：" + plus.runtime.appid);
			console.log("appid基座版本号：" + plus.runtime.version);
			let data = {
				version: info.version
			}
			appUpdate(data).then(res => {
				console.log(res)
				if (res.status == 200) {
					checkVersionToLoadUpdate(info.version, res.data);
				} else {
					uni.showToast({
						title: res.message,
						icon: "none"
					});
				}
			})
		})
		// #endif
	}
	/**
	 * 进行版本型号的比对 以及下载更新请求
	 * @param {Object} server_version 服务器最新 应用版本号
	 * @param {Object} curr_version 当前应用版本号
	 */
	const checkVersionToLoadUpdate = (server_version, data) => {

		if (server_version === data.version) {
			uni.showToast({
				title: t('login.version-update'),
				icon: "none"
			});
			return
		}
		if (server_version !== data.version) {
			//TODO 此处判断是否为 WIFI连接状态
			if (plus.networkinfo.getCurrentType() != 3) {
				uni.showToast({
					title: t('pageTranslation.aNewVersionHasBeen'),
					mask: true,
					duration: 5000,
					icon: "none"
				});
				return;
			} else {
				uni.showModal({
					title: t('navigationBar.versionUpdating'),
					content: t('pageTranslation.aNewVersionHas'),
					confirmText: t('pageTranslation.updateRightNow'),
					cancelText: t('pageTranslation.goingLate'),
					success: function(res) {
						if (res.confirm) {
							uni.showToast({
								icon: "none",
								mask: true,
								title: t('pageTranslation.aNewVersion'),
								duration: 5000,
							});
							//设置 最新版本apk的下载链接
							var downloadApkUrl = data.downloadApkUrl;
							var dtask = plus.downloader.createDownload(downloadApkUrl, {}, function(d,
								status) {
								// 下载完成
								if (status == 200) {
									plus.runtime.install(plus.io.convertLocalFileSystemURL(d
										.filename), {}, {}, function(error) {
										uni.showToast({
											title: t(
												'pageTranslation.installFail'),
											duration: 1500
										});
									})
								} else {
									uni.showToast({
										title: t('pageTranslation.updateFail'),
										duration: 1500
									});
								}
							});

							//加载进度条
                            dtask.start();
							var prg = 0;
							var showLoading = plus.nativeUI.showWaiting("正在下载");
							//popup.value.open()
							dtask.addEventListener('statechanged', function(task, status) { //添加下载任务事件监听器
								// 给下载任务设置一个监听 并根据状态 做操作
								switch (task.state) {
									case 1:
										//showLoading.setTitle("正在下载");
										break;
									case 2:
										//showLoading.setTitle("已连接到服务器");
										break;
									case 3:
										prg = parseInt( //下载的进度
											(parseFloat(task.downloadedSize) / parseFloat(task
												.totalSize)) * 100
										);
										 //data.percent = prg;
										showLoading.setTitle("版本更新,正在下载" + prg + "% ");
										break;
									case 4:
										plus.nativeUI.closeWaiting(); //关闭系统提示框
										//popup.value.close()
										break;
								}

							});


							

						} else if (res.cancel) {
							console.log('稍后更新');
						}
					}
				});
			}
		}
	}
</script>
<style scoped>
	.mine {
		background-color: #52B5AD;
	}

	::v-deep .gui-segmented-control-item {
		height: 40rpx;
		line-height: 40rpx;
	}

	.login-langType {
		position: absolute;
		top: 40rpx;
		right: 20rpx;
	}

	.login-langType {
		position: absolute;
		top: 40rpx;
		right: 20rpx;
	}

	.ucenter-face {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-face-image {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-line {
		height: 20rpx;
		margin: 16rpx 0;
	}

	.logoff {
		line-height: 88rpx;
		font-size: 28rpx;
	}

	.gui-list-title-text {
		line-height: 60rpx;
	}

	.item-icon {
		height: 45rpx;
		width: 45rpx;
		padding: 15rpx;
	}

	.gui-primary-colortwo {
		color: #37886c !important;
	}
</style>
